import React, { useEffect, useState } from "react";

export const Child = (props) => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  //
  useEffect(() => {
    // effect 中取到的值都是 componentDidUpdate
    console.log(count1, "effect1");
  }, [count1]);
  // 第一次执行是在 componentDidMount
  useEffect(() => {
    // effect 中取到的值都是 第二次执行是在： componentDidUpdate
    console.log(count2, "effect2");
  }, [count2]);
  useEffect(() => {
    // effect 中取到的值都是 第二次执行是在： componentDidUpdate
    console.log("effect all: []");
  }, []); // 只是在 componentDidMount 和 componentWillUnmount 时执行

  useEffect(() => {
    // effect 中取到的值都是 第二次执行是在： componentDidUpdate
    console.log("effect null");
  }); // 所有的 state 发生了改变都会执行

  return (
    <div>
      <p>test: {count1}</p>
      <p>test: {count2}</p>
      <button
        onClick={() => {
          let i = count1;
          setCount1(++i);
        }}
      >
        click me 1
      </button>
      <button
        onClick={() => {
          let i = count2;
          setCount2(++i);
        }}
      >
        click me 2
      </button>
    </div>
  );
};
